<template>
  <div class="contact no_scroll_bar">
    <HeaderSearchInput v-model="contactSearch"></HeaderSearchInput>
    <div class="friend_apply" @click="handleGotoApplyPage(0)">
      <span>好友申请</span>
    </div>
    <div class="group_apply" @click="handleGotoApplyPage(1)">
      <span>群聊申请</span>
    </div>
    <FriendPanel :friends="users"></FriendPanel>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import FriendPanel from './components/friendpanel/FriendPanel.vue';
import type { FriendRequestItem } from '@/components/UserItem.vue';
import HeaderSearchInput from '@/components/search_input/HeaderSearchInput.vue';
import { useRouter } from 'vue-router';
import { friendList } from '@/api/friend';
const contactSearch = ref();

const router = useRouter();

const users = ref<Array<FriendRequestItem>>([]);

const handleGotoApplyPage = (type: number) => {
  router.push({
    name: `contactApply`,
    params: {
      type: type
    }
  });
}

const getFriendList = async () => {
  try {
    const result = await friendList();
    console.log(result);
    if (result.code === 1) {
      users.value = result.data;
    }
  } catch (e) {
    console.log(e);
  }
}

const init = () => {
  getFriendList();
}

init();
</script>

<style lang="scss" scoped>
.contact {
  display: flex;
  flex-flow: column;
  flex: 1;
  overflow-y: auto;
  gap: 10px;

  .apply-base {
    height: 30px;
    flex-shrink: 0;
    background-color: white;
    display: flex;
    align-items: center;
    padding: 10px;
    user-select: none;

    &:hover {
      background-color: rgba(0, 0, 0, 0.100);
    }
  }

  .friend_apply {
    @extend .apply-base;
  }

  .group_apply {
    @extend .apply-base;
  }
}
</style>
